<template>
  <div id="quesTemplate">
    <!--使用公共头部区-->
    <c-header :classId1="className"></c-header>
    <!--问卷模板主体区-->
    <div class="tem-body">
      <div class="temb-header">
        <el-row>
          <el-col :span="4" class="elColOne">选择问卷模板</el-col>
          <el-col :span="4" :offset="16" class="elColTwo">
            <router-link to="/quesEdit">
            	<el-button type="primary">新增模板</el-button>
            </router-link>
          </el-col>
        </el-row>
      </div>
      <div class="temb-content">
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="小区分类">
            <div class="tab-left">
              <span>小区分类满意度调查模板</span>
            </div>
            <div class="tab-right">
              <ol type="1">
                <li>
                  <span class="s1">满意度问卷A</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷B</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷C</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷D</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
              </ol>
              <button>使用该模板</button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商业住宅">
          	<div class="tab-left">
              <span>商业住宅满意度调查模板</span>
            </div>
            <div class="tab-right">
              <ol type="1">
                <li>
                  <span class="s1">满意度问卷A</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷B</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷C</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷D</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
              </ol>
              <button>使用该模板</button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="小区住宅">
          	<div class="tab-left">
              <span>小区住宅满意度调查模板</span>
            </div>
            <div class="tab-right">
              <ol type="1">
                <li>
                  <span class="s1">满意度问卷A</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷B</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷C</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷D</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
              </ol>
              <button>使用该模板</button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商住两用">
          	<div class="tab-left">
              <span>商住两用满意度调查模板</span>
            </div>
            <div class="tab-right">
              <ol type="1">
                <li>
                  <span class="s1">满意度问卷A</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷B</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷C</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
                <li>
                  <span class="s1">满意度问卷D</span>
                  <span class="s2">
		        				<a href="#">编辑/</a>
		        				<a href="#">删除</a>
		        		  </span>
                </li>
              </ol>
              <button>使用该模板</button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  //导入公共头部组件
  import cHeader from '../common/quesHeader.vue';
  export default {
    data() {
      return {
        tabPosition: 'left',
        className: 'active'
      }
    },
    components: {
      "c-header": cHeader
    }
  }
</script>

<style scoped="scoped">
	#quesTemplate{
		min-width: 960px;
		font-family: "微软雅黑";
	}
  .tem-body {
    padding: 0 12px;
  }
  .tem-body .temb-header {
    height: 55px;
    line-height: 55px;
    width: 100%;
    overflow: hidden;
  }
  .temb-header .elColOne{
  	padding-left: 20px;
  	color: #409EFF;
  	font-size: 17px;
  	letter-spacing: 2px;
  }
  .temb-header .elColTwo{
  	text-align: right;
  }
  .temb-header >>> .el-button {
    margin: 0;
    width: 110px;
  }
  /*左边样式区*/  
  #quesTemplate >>> .el-tabs--left .el-tabs__nav-wrap.is-left {
    margin-right: -1px;
    background-color: rgb(242, 242, 242);
    width: 200px;
    height: 88vh;
    border-bottom: 1px solid #DCDFE6;
  }
  #quesTemplate >>> .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
    padding-top: 15px;
    padding-left: 25px;
  }
  #quesTemplate >>> .el-tabs__active-bar {
    background-color: transparent;
  }  
  /*右边样式区*/
  #quesTemplate >>> .el-tabs__content {
    overflow: hidden;
    position: relative;
    padding: 10px 10px;
    height: 99%;
    margin-right: 12px;
    box-sizing: border-box;
  }
  .temb-content .tab-left{
  	width: 40%;
  	height: 54vh;
  	float: left;
  	border: 1px solid #DCDFE6;
  	box-sizing: border-box;
  	padding: 15px 15px;
  	border-radius: 5px;
  }
  .temb-content .tab-right{
  	position: relative;
  	width: 55%;
  	height: 54vh;
  	float: right;
  	border: 1px solid #DCDFE6;
  	box-sizing: border-box;
  	overflow: auto;
  	border-radius: 5px;
  }
  .tab-right ol li{
  	height: 35px;
  	line-height: 35px;
  }
  .tab-right .s1{
  	float: left;
  }
  .tab-right .s2{
  	float: right;
  	margin-right: 50px;
  	font-size: 14px;  	
  }
  .tab-right .s2 a{
  	color: dodgerblue;
  	text-decoration: none;
  }
  .tab-right .s2 a:hover{
  	text-decoration: underline;
  }
  .tab-right button{
  	position: absolute;
  	left: 50%;
  	bottom: 5%;
  	transform: translateX(-50%);
  	height: 40px;
  	line-height: 40px;
  	width: 150px;
  	color: #fff;
  	background-color: rgb(22,155,213);
  	border: none;
  	outline: none;
  	border-radius: 5px;
  	cursor: pointer;
  }
</style>